<template>
  <fieldset>
    <legend>商品</legend>
    <h1>商品:Products</h1>
    <ul>
      <li v-for="item in productData" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        -----
        <b>价格：{{ item.price }}</b>
        -----
        <b>库存：{{ item.inventory }}</b>
        <button :disabled="item.inventory === 0" @click="addCart(item)">
          +加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
import { mapActions, mapState } from "vuex";
import axios from "axios";
export default {
  methods: {
    addCart(current) {
      console.log("current", current);
      this.ADD_CART(current);
    },
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapActions("cart", ["ADD_CART"]),
  },
  computed: {
    ...mapState("product", ["productData"]),
  },
  mounted() {
    this.FETCH_PRODUCT();
  },
  created() {
    axios
      .get("/api/data/index.json", {
        header: {},
        params: {
          name: "lilei",
        },
      })
      .then((res) => {
        console.log("res", res);
      });
    // axios
    //   .post(
    //     "/api/users/login",
    //     {
    //       username: "lbw",
    //       password: "555",
    //     },
    //     {
    //       headers: {
    //         nickname: "jntm",
    //       },
    //     }
    //   )
    //   .then((res) => {
    //     console.log(res);
    //   });
    axios({
      url: "/api/users/login",
      method: "post",
      data: {
        username: "admin",
        password: "admin",
      },
      timeout: 3000,
      withCredentials: true,
    }).then((res) => {
      console.log(res);
    });
  },
};
</script>
<style scoped></style>
